<template>
  <div class='waterTreeOnePage'>
    <div class="waterBox">
      <van-list 
        @load="lazyLoading" 
        :offset="80" 
        :immediate-check="false"
        :finished="finished"
        finished-text="------ 我可是有底线的 ------"
      >
        <ul class="water_left fl" ref="left">
          <li v-for="(leftHeight,index) in leftItems" :key="index" class="water-item">
            <img :src="leftHeight.url" alt="">
            <div class="goodsMsg">
              <p class="des">我要五彩斑斓的黑</p>
              <div class="bottom flex">
                <div class="name">
                  <span>我是名字</span>
                </div>
                <div class="star flex flex_1">
                  <span class="star_num">1720</span>
                  <van-icon name="like-o" class="star_icon" size="14" color="#000000"/>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <ul class="water_right fr" ref="right">
          <li v-for="(rightHeight,index) in rightItems" :key="index" class="water-item">
            <img :src="rightHeight.url" alt="">
            <div class="goodsMsg">
              <p class="des">我要五彩斑斓的黑 我要五彩斑斓的黑 我要五彩斑斓的黑 我要五彩斑斓的黑</p>
              <div class="bottom flex">
                <div class="name">
                  <span>我是名字</span>
                </div>
                <div class="star flex flex_1">
                  <span class="star_num">1720</span>
                  <van-icon name="like-o" class="star_icon" size="14" color="#000000"/>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- 清除浮动 -->
        <div class="clear"></div>
      </van-list>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      leftItems: [
        
      ],
      rightItems: [
        
      ],
      firstList: [
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/6.jpg')},
        {url: require('@/global/images/3.jpg')},
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/6.jpg')},
        {url: require('@/global/images/3.jpg')},
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/3.jpg')},
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/6.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/6.jpg')},
        {url: require('@/global/images/6.jpg')},
      ],
      loadingList: [
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/6.jpg')},
        {url: require('@/global/images/3.jpg')},
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/6.jpg')},
        {url: require('@/global/images/3.jpg')},
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/3.jpg')},
        {url: require('@/global/images/5.jpg')},
        {url: require('@/global/images/1.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/6.jpg')},
        {url: require('@/global/images/2.jpg')},
        {url: require('@/global/images/6.jpg')},
        {url: require('@/global/images/6.jpg')},
      ],
      finished: false
    }
  },
  mounted () {
    this.updateWaterfall()
  },
  methods: {
    // 瀑布流关键代码 利用 vue $nextTick() 实现，通过判断每一次放入数组之后的盒子高度来判断该放在哪边，不能用flex布局，用felx布局的话，两个盒子会变的一样高
    updateWaterfall() {
      let _this = this
      let leftHeight = _this.$refs.left.offsetHeight // 得用offsetHeight ，如果用clineHeight.会出现到一定数量就只到一边的情况
      let rightHeight = _this.$refs.right.offsetHeight
      let item = _this.firstList.shift() // shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
      if (item == null) {
        return
      }
      if (leftHeight <= rightHeight) {
        _this.leftItems.push(item)
      }
      else {
        _this.rightItems.push(item)
      }
      _this.$nextTick(function () {
          _this.updateWaterfall()
      })
    },

    // 到底部自动加载数据
    lazyLoading () {
      // 到底后，先发送请求到后台
      let _this = this
      if(_this.loadingList.length == 0) { // 当后续加载数据列表中无数据时，才重新发送数据请求
        // 如果请求过来的数据小于每一页数据规定量，那么证明已无数据，_this.finished = true
        console.log('发送数据请求')
      }
      let leftHeight = _this.$refs.left.offsetHeight // 得用offsetHeight ，如果用clineHeight.会出现到一定数量就只到一边的情况
      let rightHeight = _this.$refs.right.offsetHeight
      let item = _this.loadingList.shift() // shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
      if (item == null) {
        return
      }
      if (leftHeight <= rightHeight) {
        _this.leftItems.push(item)
      }
      else {
        _this.rightItems.push(item)
      }
      _this.$nextTick(function () {
          _this.lazyLoading()
      })
    }
  }
}
</script>

<style scoped>
.waterTreeOnePage {
  padding: 0 5px;
  background: #f7f5f5e0;
}
.water_left,.water_right {
  width: 49.2%;
}
.water-item{
  background: #ffffff;
  box-sizing: border-box;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* 给图片设置了最小高度尺寸后图片加载到一边的BUG不知道怎么就解决了 */
.water-item>img{
  width: 100%;
  min-height: 10rem;
}
.goodsMsg {
  padding: 5px 8px;
}
.des {
  line-height: 1.6;
  font-weight: 500;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bottom {
  justify-content: space-between;
  padding: 5px 0;
}
.name {
  width: 65%;
  font-size: 1.2rem;
  color: rgba(144, 141, 141, 0.91);
}
.star {
  align-items: center;
  flex-direction: row-reverse;
}
.star_num {
  font-size: 1.3rem;
  font-weight: 400;
  color: rgb(144, 141, 141);
}
.star_icon {
  margin-right: 3px;
}
</style>
